import React from 'react';
import { scenes } from '../data/mockData';

interface SceneSelectorProps {
  currentScene: string;
  onSceneChange: (scene: 'coffee' | 'park' | 'restaurant' | 'library') => void;
}

export const SceneSelector: React.FC<SceneSelectorProps> = ({
  currentScene,
  onSceneChange
}) => {
  return (
    <div style={{
      position: 'absolute',
      top: '20px',
      left: '20px',
      zIndex: 1000,
      display: 'flex',
      flexDirection: 'column',
      gap: '10px'
    }}>
      <h3 style={{
        color: 'white',
        margin: '0 0 10px 0',
        textShadow: '2px 2px 4px rgba(0,0,0,0.5)',
        fontSize: '18px'
      }}>
        选择场景
      </h3>
      {scenes.map((scene) => (
        <button
          key={scene.id}
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
            onSceneChange(scene.type);
          }}
          style={{
            padding: '12px 16px',
            border: 'none',
            borderRadius: '8px',
            backgroundColor: currentScene === scene.type 
              ? 'rgba(255, 105, 180, 0.9)' 
              : 'rgba(255, 255, 255, 0.8)',
            color: currentScene === scene.type ? 'white' : '#333',
            cursor: 'pointer',
            transition: 'all 0.3s ease',
            fontWeight: currentScene === scene.type ? 'bold' : 'normal',
            fontSize: '14px',
            backdropFilter: 'blur(10px)',
            boxShadow: '0 4px 15px rgba(0,0,0,0.1)'
          }}
          onMouseEnter={(e) => {
            if (currentScene !== scene.type) {
              e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
              e.currentTarget.style.transform = 'translateY(-2px)';
            }
          }}
          onMouseLeave={(e) => {
            if (currentScene !== scene.type) {
              e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
              e.currentTarget.style.transform = 'translateY(0)';
            }
          }}
        >
          <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>
            {scene.name}
          </div>
          <div style={{ fontSize: '12px', opacity: 0.8 }}>
            {scene.description}
          </div>
        </button>
      ))}
    </div>
  );
};